<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        #app {
            width: 80%;
            margin: 0 auto;
            padding: 0;
        }
    </style>
</head>
<body>
  <div id="app">
      <div>
          <el-row style="height: 50px;line-height: 50px;background-color: #cccccc">
              <el-col :span="12" :offset="10">
                  <div >
                      欢迎光临蜗牛书城 &nbsp;|&nbsp;
                      <span th:if="${#strings.isEmpty(session.userInfo)}">
                          <a href="">登录</a> | <a href="">注册</a>
                      </span>

                      <span th:if="${!#strings.isEmpty(session.userInfo)}" >
                          &nbsp; <a th:href="@{/user.html}">[[${session.userInfo.username}]]</a>
                      </span>
                      &nbsp;|&nbsp;<a th:href="@{/order.html}">我的订单</a>  &nbsp;|&nbsp;
                      <a th:href="@{/cart.html}">我的购物车</a>
                      <span th:if="${!#strings.isEmpty(session.userInfo)}">
                          &nbsp;|&nbsp;<a href="">退出</a>
                      </span>
                  </div>
              </el-col>
          </el-row>
      </div>
      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="12" :offset="6">
                  <div>
                      <el-form :inline="true" class="demo-form-inline">
                          <el-form-item label="书名:">
                              <el-input v-model="name" placeholder="请输入书名"></el-input>
                          </el-form-item>
                          <el-form-item>
                              <el-button type="info" @click.prevent="search">搜索</el-button>
                              <el-button type="info" @click.prevent="searchAll">搜索全部</el-button>
                          </el-form-item>
                      </el-form>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div>
          <el-row style="height: 50px;line-height: 50px;background-color: #cccccc">
              <el-col :span="16" :offset="4">
                  <div>
                      <el-menu
                              class="el-menu-demo"
                              mode="horizontal"
                              :default-active="activeIndex"
                              background-color="#888"
                              @select="handleSelect"
                              text-color="#000"
                              active-text-color="#ffd04b">
                          <el-menu-item :index="(index+1)+''" v-for="(c,index) in cataList" @click="test(c.id)">{{c.catagoryname}}</el-menu-item>
                          <!--<el-menu-item index="2">玄幻小说</el-menu-item>
                          <el-menu-item index="3">历史演义</el-menu-item>
                          <el-menu-item index="4">计算机</el-menu-item>
                          <el-menu-item index="5">生物学</el-menu-item>
                          <el-menu-item index="6">医学</el-menu-item>
                          <el-menu-item index="7">天文</el-menu-item>
                          <el-menu-item index="8">地理</el-menu-item>
                          <el-menu-item index="9">量子力学</el-menu-item>-->
                      </el-menu>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div style="margin-top: 10px">
          <el-row>
              <el-col :span="16" :offset="4">
                  <div>
                    <table>
                        <tr v-for="b in bookList">
                            <td>
                                <el-image
                                        style="width: 100px; height: 100px;cursor: pointer"
                                        src="http://localhost:10001/a.jpg"
                                        fit="cover" @click="detail(b.id)"></el-image>
                            </td>
                            <td style="padding-left: 15px">
                                <el-descriptions title="图书信息:">
                                    <el-descriptions-item label="书名:">{{b.bname}}</el-descriptions-item>
                                    <el-descriptions-item label="作者">{{b.author}}</el-descriptions-item>
                                    <el-descriptions-item label="价格:">{{b.price}}元</el-descriptions-item>
                                    <el-descriptions-item label="出版社:">{{b.publish}}</el-descriptions-item>
                                    <el-descriptions-item label="出版日期:">{{b.publishdate}}</el-descriptions-item>
                                </el-descriptions>
                            </td>
                        </tr>
                        <!--<tr>
                            <td>
                                <el-image
                                        style="width: 100px; height: 100px"
                                        src="http://localhost:10001/a.jpg"
                                        fit="cover"></el-image>
                            </td>
                            <td style="padding-left: 15px">
                                <el-descriptions title="图书信息:">
                                    <el-descriptions-item label="书名:">西游记</el-descriptions-item>
                                    <el-descriptions-item label="作者">吴承恩</el-descriptions-item>
                                    <el-descriptions-item label="价格:">25.0元</el-descriptions-item>
                                    <el-descriptions-item label="出版社:">人民出版社</el-descriptions-item>
                                    <el-descriptions-item label="出版日期:">1998-09-09</el-descriptions-item>
                                </el-descriptions>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-image
                                        style="width: 100px; height: 100px"
                                        src="http://localhost:10001/a.jpg"
                                        fit="cover"></el-image>
                            </td>
                            <td style="padding-left: 15px">
                                <el-descriptions title="图书信息:">
                                    <el-descriptions-item label="书名:">西游记</el-descriptions-item>
                                    <el-descriptions-item label="作者">吴承恩</el-descriptions-item>
                                    <el-descriptions-item label="价格:">25.0元</el-descriptions-item>
                                    <el-descriptions-item label="出版社:">人民出版社</el-descriptions-item>
                                    <el-descriptions-item label="出版日期:">1998-09-09</el-descriptions-item>
                                </el-descriptions>
                            </td>
                        </tr>-->
                    </table>
                  </div>
              </el-col>
          </el-row>
      </div>
      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="12" :offset="6">
                  <div>
                      <el-pagination
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page="pageNum"
                              :page-sizes="[3, 6, 12, 24]"
                              :page-size="pageSize"
                              layout="total, sizes, prev, pager, next, jumper"
                              :total="total">
                      </el-pagination>
                  </div>
              </el-col>
          </el-row>
      </div>
      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="12" :offset="6">
                  <div style="text-align: center">
                      版权所有，翻版必究
                  </div>
              </el-col>
          </el-row>
      </div>
  </div>

  <script>
      let vueApp = new Vue({
          el:"#app",
          data:{
              activeIndex:'0',
              name:'',
              pageNum:1,
              pageSize:3,
              total:0,
              cataList:[],
              bookList:[],
              cataId:0
          },
          methods:{
              detail(id){
                 console.log(id) ;
                 localStorage.setItem("bookId",id);
                 location.href = './book.html' ;
              },
              searchAll(){
                  this.cataId = 0;
                  this.name = '';
                  this.activeIndex = 0 ;
                  this.initBook();
              },
              test(id){
                  console.log(id);
                  this.cataId = id;
                  this.initBook();
              },
              search(){
                  this.pageNum = 1;
                  this.initBook()
              },
              handleSizeChange(size){
                  this.pageNum =1;
                  this.pageSize = size ;
                  this.initBook();
              },
              handleCurrentChange(now){
                  this.pageNum = now;
                  this.initBook();
              },
              handleSelect(key, keyPath) {
                  console.log(key);
                  console.log(keyPath)
                  this.activeIndex = key ;
              },
              initCatagory(){
                  let url = './catagory/list' ;
                  axios.get(url)
                  .then((res)=>{
                      if (res.data.code == 200){
                          this.cataList = res.data.data ;
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  });
              },
              initBook(){
                  let url = "./book/searchBook";
                  axios.get(url,{
                      params:{
                          name:this.name ,
                          cataId:this.cataId,
                          now:this.pageNum,
                          size:this.pageSize
                      }
                  }).then((res)=>{
                      if (res.data.code == 200) {
                          this.bookList = res.data.data.list;
                          this.pageNum = res.data.data.pageNum;
                          this.pageSize = res.data.data.pageSize;
                          this.total = res.data.data.total;
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  })
              }
          },
          created(){
              this.initCatagory();
              this.initBook();
          }
      })
  </script>

</body>
</html>